
<template>
  <el-row class="tac">
    <el-col >
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        :collapse="isCollapse"
        :router="true"
      >
        <!-- 标题 -->
        <div class="containerdiv">  
            <img src="../assets/favicon.ico" alt="Your Image" class="image">  
            <span class="text">后台管理</span>  
        </div>

        <!-- 菜单 -->
        <el-sub-menu index="1">
          <template #title>
            <el-icon><Share /></el-icon>
            <span>客户管理</span>
          </template>
            <el-menu-item index="/customer/customerlist">客户列表</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2">
          <template #title>
            <el-icon><UserFilled /></el-icon>
            <span>业务管理</span>
          </template>
            <!-- <<el-menu-item index="/business/mainlist">主页</el-menu-item> -->
            <el-menu-item index="/business/businesslist">业务列表</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2">
          <template #title>
            <el-icon><UserFilled /></el-icon>
            <span>工单管理</span>
          </template>
            <el-menu-item index="/workorder/workorder">工单列表</el-menu-item>
        </el-sub-menu>
        <!-- <el-menu-item index="4">
          <el-icon><setting /></el-icon>
          <span>库存管理</span>
        </el-menu-item> -->
        <el-sub-menu index="4">
          <template #title>
            <el-icon><UserFilled /></el-icon>
            <span>管理员管理</span>
          </template>
            <el-menu-item index="/user/userlist">员工列表</el-menu-item>
            <el-menu-item index="/user/displayuser">员工恢复</el-menu-item>
            <el-menu-item index="/region/regionlist">区域管理</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import {
  Document,
  Menu as IconMenu,
  Location,
  Share,
  UserFilled,
  Setting,
} from '@element-plus/icons-vue'
import {ref, defineProps} from 'vue'

type Props = {
    isCollapse: boolean
}
defineProps<Props>()

</script>

<style scoped>
    .el-menu-vertical-demo {
        height: 100vh;
    }
    .el-menu-item {
        min-width: 0;
    }
    .containerdiv {  
        /* 你可以设置容器的样式，例如宽度、高度、背景色等 */  
        /* width: 300px; /* 示例宽度 */  
        height: 48px;  
        
        padding: 10px; /* 内边距 */  
        border-bottom: 2px solid; /* 设置下边框宽度和样式 */  
        border-bottom-color: #F5F5F5; /* 设置下边框颜色为红色 */  
    }  
  
    .image {  
        display: inline-block;  
        vertical-align: middle; /* 图片与文字垂直居中对齐 */  
        margin-right: 6px; /* 图片右边距，可选 */  
        width: 20px;
    }
    
    .text {  
        display: inline-block;  
        vertical-align: middle; /* 文字与图片垂直居中对齐 */  
        font-weight: bold; /* 加粗文字 */  
        font-size: 14px;
    }
</style>
